import React, { useEffect } from 'react'
import 'emoji-mart/css/emoji-mart.css'
import { Picker, NimblePicker } from 'emoji-mart'
import { Icon, Input, Space, Button, Trigger, Mentions, Message as ArcoMessage } from '@arco-design/web-react'
import './index.css'
import { IconHome, IconCalendar, IconPlus, IconCheck } from '@arco-design/web-react/icon'
// import Ws from '../AppLayout/Ws'
import PubSub from 'pubsub-js'
import WsMessageType from '../../utils/Common'
import { useSelector } from 'react-redux'

const IconFont = Icon.addFromIconFontCn({ src: 'https://at.alicdn.com/t/font_2984064_x7tlml1hro.js' })

function MessageEditor(props) {
  const textAreaRef = React.useRef()
  const triggerRef = React.useRef()
  const userStore = useSelector((state) => state.user)

  // 消息编辑内容
  const [messageContent, setMessageContent] = React.useState('')
  // 提及下拉框
  const [mentionOptions, setMentionOptions] = React.useState([])

  useEffect(() => {
    setTimeout(() =>
      setMentionOptions([{ label: props.name + '(' + props.id + ')', value: props.name + '(' + props.id + ')' }])
    )
  }, [])

  // 发送消息
  const sendMessage = (message) => {
    let messageVO = {
      sender: userStore.info.id,
      receiver: props.id,
      type: props.type,
      content: message,
    }
    // 告诉ws发送消息
    PubSub.publish(WsMessageType.sendMessage, JSON.stringify({ type: WsMessageType.sendMessage, content: messageVO }))
  }

  // 处理表情包
  const searchEmoji = (emoji, event) => {
    setMessageContent(messageContent + emoji.native)
  }

  const EmojiPop = () => {
    return <Picker set='apple' emoji='' showPreview={false} onClick={(emoji, event) => searchEmoji(emoji, event)} />
  }

  return (
    <>
      <div className='editor-toolbar'>
        <Space>
          <Trigger
            ref={triggerRef}
            trigger={['click']}
            position='top'
            showArrow
            arrowProps={{
              style: { background: 'rgba(255,255,255,0.6)' },
            }}
            blurToHide
            duration={10}
            mouseEnterDelay={10}
            mouseLeaveDelay={10}
            // unmountOnExit={false}
            // popupAlign={{ top: 1 }}
            popup={() => <EmojiPop />}
          >
            <Button
              className='icon-button'
              type='text'
              icon={<IconFont type='icon-biaoqing' style={{ fontSize: 22, color: '#111111' }} />}
            />
          </Trigger>
          <Button
            className='icon-button'
            type='text'
            icon={<IconFont type='icon-tupian1' style={{ fontSize: 22, color: '#111111' }} />}
          />
        </Space>
      </div>
      <div className='editor-input'>
        {/* 感觉不能用这个文本框组件 */}
        <Mentions
          position='top'
          options={mentionOptions}
          split=' '
          id='textarea'
          ref={textAreaRef}
          placeholder='回复'
          autoSize={{ minRows: 2, maxRows: 6 }}
          style={{ width: '100%' }}
          maxLength={500}
          showWordLimit
          value={messageContent}
          onChange={(value, e) => {
            setMessageContent(value)
          }}
          getPopupContainer={() => textAreaRef.current}
          onPressEnter={(e) => {
            if (!messageContent || messageContent === '') {
              ArcoMessage.info('请输入消息内容')
              e.preventDefault()
              setMessageContent('')
              return
            }

            // 为了@
            if (messageContent && messageContent.endsWith('@')) {
              e.preventDefault()
              return
            }

            if (e.ctrlKey) {
              // 按下ctrl
              setMessageContent(messageContent + '\r\n')
            } else {
              // 阻止原生enter换行
              e.preventDefault()
              // 发送消息给ws服务端
              sendMessage(messageContent)
              // 清空消息
              setMessageContent('')
            }
          }}
          wrapperStyle={{ color: 'blue' }}
        />
      </div>
    </>
  )
}

export default MessageEditor
